import 'package:architecture/os_size.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:multi_image_picker_view/multi_image_picker_view.dart';

import '../../../widgets/text_button.dart';
import 'picture_conduct_detail_controller.dart';

class PictureConductDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetX<PictureConductDetailController>(
        init: PictureConductDetailController(),
        builder: (controller) {
          return Scaffold(
              appBar: AppBar(
                title: Text('图片处理'),
                actions: [
                  TextButton(
                      onPressed: () {
                        if (controller.type.value == 1) {
                          controller.fileLocation();
                        } else {
                          controller.outputDirectory();
                        }
                      },
                      child: Text(
                        '输出目录',
                        style: TextStyle(color: Colors.white),
                      ))
                ],
              ),
              body:
                  Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
                Container(
                    width: windowWidth * 0.65,
                    margin: EdgeInsets.only(bottom: 15),
                    child: MultiImagePickerView(
                        controller: controller.pickController,
                        padding: const EdgeInsets.all(10),
                        builder: (context, imageFile) {
                          return GestureDetector(
                              onTap: () {
                                // controller.reNameFile(imageFile.path!);
                              },
                              child: Column(
                                children: [
                                  Expanded(
                                      child: Container(
                                          width: windowWidth * 0.2,
                                          child: DefaultDraggableItemWidget(
                                            imageFile: imageFile,
                                            fit: BoxFit.cover,
                                          ))),
                                  Text(imageFile.path.toString()),
                                ],
                              ));
                        })),
                Spacer(),
                Container(
                    margin: EdgeInsets.only(top: 15),
                    width: windowWidth * 0.32,
                    child: Column(
                      children: [
                        Row(children: [
                          _textButton('重命名', isSelected: controller.type == 1,
                              onPressed: () {
                            controller.changeType(1);
                          }),
                          _textButton('转换格式', isSelected: controller.type == 2,
                              onPressed: () {
                            controller.changeType(2);
                          }),
                          _textButton('修改大小', isSelected: controller.type == 3,
                              onPressed: () {
                            controller.changeType(3);
                            controller.reSize();
                          }),
                        ]),
                        Offstage(
                            offstage: controller.type.value != 1,
                            child: _reName(controller)),
                        Offstage(
                          offstage: controller.type.value != 2,
                          child: _transformFormat(controller),
                        )
                      ],
                    ))
                //   ],
                // ),
              ]));
        });
  }

  _reName(PictureConductDetailController controller) {
    return Container(
      height: windowHeight * 0.1,
      child: Row(
        children: [
          SizedBox(
              width: windowWidth * 0.1,
              child: TextField(
                  controller: controller.nameEditingController,
                  decoration: InputDecoration(hintText: '请输入名称'))),
          SizedBox(
            width: 20,
          ),
          SizedBox(
              width: windowWidth * 0.12,
              child: TextField(
                  controller: controller.indexTextEditingController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(hintText: '请输入起始序号'))),
          _textButton('开始', onPressed: () {
            controller.reName();
          }),
        ],
      ),
    );
  }

  _transformFormat(PictureConductDetailController controller) {
    return Container(
        margin: EdgeInsets.only(top: 15),
        child: Column(children: [
          Row(
            children: [
              Container(
                  width: windowWidth * 0.11,
                  height: 50,
                  child: RadioListTile<String>(
                      title: const Text('jpg'),
                      value: 'jpg',
                      groupValue: controller.format.value,
                      onChanged: (String? newValue) {
                        controller.chooseFormat(newValue!);
                      })),
              Container(
                  width: windowWidth * 0.11,
                  height: 50,
                  child: RadioListTile<String>(
                      title: const Text('png'),
                      value: 'png',
                      groupValue: controller.format.value,
                      onChanged: (String? newValue) {
                        controller.chooseFormat(newValue!);
                      })),
              _textButton('开始', onPressed: () {
                controller.transform();
              }),
            ],
          ),
          Row(
            children: [
              Container(
                  width: windowWidth * 0.11,
                  height: 50,
                  child: RadioListTile<String>(
                    title: const Text('webp'),
                    value: 'webp',
                    groupValue: controller.format.value,
                    onChanged: (String? newValue) {
                      controller.chooseFormat(newValue!);
                    },
                  )),
              Container(
                  width: windowWidth * 0.11,
                  height: 50,
                  child: RadioListTile<String>(
                      title: const Text('ico'),
                      value: 'ico',
                      groupValue: controller.format.value,
                      onChanged: (String? newValue) {
                        controller.chooseFormat(newValue!);
                      }))
            ],
          ),
        ]));
  }

  _textButton(String text, {bool isSelected = false, Function? onPressed}) {
    return Container(
        margin: EdgeInsets.only(left: 15, right: 20),
        alignment: Alignment.center,
        child: MyTextButton(
            text: text,
            confirm: () {
              onPressed?.call();
            },
            backgroundColor:
                isSelected ? Colors.amber : Colors.deepPurpleAccent,
            textStyle:
                TextStyle(color: isSelected ? Colors.black : Colors.white)));
  }
}
